<!--
 * @author: 十一
 * @since: 2024-08-27
 * Drawer.vue
 * @desc: new page
-->
<template>
  <a-drawer
    v-model:open="open"
    :destroyOnClose="true"
    width="600"
    class="custom-class"
    root-class-name="root-class-name"
    :title="props.drawerOptions.title"
    placement="right"
  >
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item ref="icon" label="菜单Icon" name="icon">
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.icon }}
        </div>

        <div v-else>
          <a-space>
            <a-button v-if="formState.icon"> <i class="iconfont" :class="formState.icon" ></i></a-button>
            <a-input
              disabled
              v-model:value="formState.icon"
              placeholder="菜单和面包屑对应的图标"
            >
            </a-input>
            <a-button @click="() => (modelOpen = true)">选择图标</a-button>
          </a-space>
        </div>
      </a-form-item>
      <a-form-item ref="title" label="菜单标题" name="title">
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.title }}
        </div>
        <a-input
          v-model:value="formState.title"
          placeholder=" 路由标题 (用作 document.title || 菜单的名称)"
          v-else
        />
      </a-form-item>
      <a-form-item ref="name" label="菜单名称" name="name">
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.name }}
        </div>
        <a-input
          v-model:value="formState.name"
          placeholder="路由 name (对应页面组件 name)"
          v-else
        />
      </a-form-item>
      <a-form-item ref="path" label="菜单路径" name="path">
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.path }}
        </div>
        <a-input
          v-model:value="formState.path"
          placeholder="路由菜单访问路径"
          v-else
        />
      </a-form-item>
      <a-form-item ref="path" label="从定向" name="path">
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.redirect }}
        </div>
        <a-input
          v-model:value="formState.redirect"
          placeholder="路由重定向地址"
          v-else
        />
      </a-form-item>
      <a-form-item ref="component" label="视图组件" name="component">
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.component }}
        </div>
        <a-input
          v-model:value="formState.component"
          placeholder="视图文件路径"
          v-else
        />
      </a-form-item>
      <a-form-item ref="is_hide" label="是否展示" name="is_hide">
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.is_hide }}
        </div>
        <a-switch
          v-else
          v-model:checked="formState.is_hide"
          checked-children="展示"
          un-checked-children="不展示"
        />
      </a-form-item>
      <a-form-item ref="sort" label="排序" name="sort">
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.sort }}
        </div>
        <a-input
          v-model:value="formState.sort"
          placeholder="请输入排序字段"
          v-else
        />
      </a-form-item>
      <a-form-item ref="is_link" label="是否外链" name="is_link">
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.is_link }}
        </div>
        <a-switch
          v-else
          v-model:checked="formState.is_link"
          checked-children="是"
          un-checked-children="否"
        />
      </a-form-item>
      <a-form-item
        ref="link"
        label="外链地址"
        name="link"
        v-if="formState.is_link"
      >
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.link }}
        </div>
        <a-input
          v-model:value="formState.link"
          placeholder="路由外链时填写的访问地址"
          v-else
        />
      </a-form-item>
      <a-form-item ref="is_full" label="是否全屏" name="is_full">
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.is_full }}
        </div>
        <a-switch
          v-else
          v-model:checked="formState.is_full"
          checked-children="是"
          un-checked-children="否"
        />
      </a-form-item>
      <a-form-item ref="is_affix" label="是否固定" name="is_affix">
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.is_affix }}
        </div>
        <a-switch
          v-else
          v-model:checked="formState.is_affix"
          checked-children="是"
          un-checked-children="否"
        />
      </a-form-item>
      <a-form-item ref="is_new_window" label="是否新窗口打开" name="is_new_window">
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.is_new_window }}
        </div>
        <a-switch
          v-else
          v-model:checked="formState.is_new_window"
          checked-children="是"
          un-checked-children="否"
        />
      </a-form-item>
      <a-form-item
        :wrapper-col="{ span: 18, offset: 6 }"
        v-if="props.drawerOptions.state != 2"
      >
        <a-button type="primary" @click="onSubmit">提交</a-button>
        <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
  <a-modal
    v-model:open="modelOpen"
    title="图标选择"
    @ok="() => (modelOpen = false)"
    width="700"
    :bodyStyle="{ height: '600px', overflow: 'scroll' }"
  >
    <Iconfont @send-data="receiveDataFromChild" />
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { reactive, toRaw } from "vue";
import type { UnwrapRef } from "vue";
import type { Rule } from "ant-design-vue/es/form";
import { DataEcho} from "@/utils/dataEcho";
import { editMenuApi, addMenuApi } from "@/api/main";
import { message } from "ant-design-vue";
import emitter from "@/utils/mitt";
import Iconfont from "@/components/Iconfont/index.vue";
const open = ref<boolean>(false);
const modelOpen = ref<boolean>(false);
const receivedData = ref("");
const receiveDataFromChild = (data: string) => {
  formState.icon = data;
};
const formRef = ref();
interface FormState {
  id: string;
  parent_id:string|null;
  icon: string;
  title: string;
  name: string;
  path: string;
  component: string;
  is_hide: boolean |number;
  sort: number;
  is_link: boolean |number;
  link: string;
  is_full: boolean |number;
  redirect: string;
  is_affix:boolean |number;
  is_new_window:boolean |number;
}

const labelCol = { span: 6 };
const wrapperCol = { span: 18 };
const formState: UnwrapRef<FormState> = reactive({
  id: "",
  parent_id:null,
  icon: "",
  title: "",
  name: "",
  path: "",
  component: "",
  is_hide: false,
  sort: 0,
  is_link: false,
  link: "",
  is_full: false,
  redirect: "",
  is_affix:false,
  is_new_window:false,
});
const rules: Record<string, Rule[]> = {
  name: [
    {
      required: true,
      message: "菜单标题不能为空",
      trigger: "change",
    },
  ],
};

// 接收父组件的参数
const props = defineProps(["drawerOptions"]);
// watch(
//   () => open.value,
//   (newVal) => {
//     if(props.drawerOptions.state==4){
//       formRef.value.resetFields();
//       formState.parent_id = props.drawerOptions.options.id
//     }else {
//       DataEcho(formState, props.drawerOptions.options);
//       formState.is_full = formState.is_full==1?true:false;
//       formState.is_link = formState.is_link==1?true:false;
//       formState.is_hide = formState.is_hide==1?true:false;
//       formState.is_affix = formState.is_affix==1?true:false;
//       formState.is_new_window = formState.is_new_window==1?true:false;
//       formState.parent_id = null
//     }
//   },
//   {
//     immediate: true,
//   }
// );
const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      const requsetParams = toRaw(formState);
      if (props.drawerOptions.state == 0||props.drawerOptions.state == 4) {
        addMenuApi(requsetParams).then((response: any) => {
          console.log(response);
          if (response.code == 200) {
            message.success("添加成功");
            emitter.emit("handleSuccess");
            open.value = false;
          } else {
            message.error(response.msg);
          }
        });
      } else {
        editMenuApi(requsetParams).then((response: any) => {
          console.log(response);
          if (response.code == 200) {
            message.success("修改成功");
            emitter.emit("handleSuccess");
            open.value = false;
          } else {
            message.error(response.msg);
          }
        });
      }
    })
    .catch((error: any) => {
      console.log("error", error);
    });
};

const resetForm = () => {
  console.log(formRef.value);
  formRef.value.resetFields();
};
const showDrawer = (drawerOptions:any,state:any) => {
  open.value = true;
  console.log(drawerOptions);
  console.log(state);
};
//暴露给父组件
defineExpose({ showDrawer });
</script>

<style scoped></style>
